<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新增员工</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/comments.css" media="all">
    <style>
        .layui-form-label{
            width: 110px;
        }
        .addFile{
            width: 100px;
            height: 100px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }
        .addFile:hover {
            /* border: 1px dashed #f58843; */
            color: #f58843;
        }
        .addFile:hover i {
            color: #f58843;
        }
        .addFile i {
            font-size: 14px;
            color: #f5dab0;
            margin-right: 5px;
        }
        .addFileImg{
            width: 100px;
            height: 100px;
            border-radius: 4px;
            border: 1px dashed #e6e6e6;
            cursor: pointer;
            overflow: hidden;
            display: none;
        }
        .addFileImg img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="maincontainer">
        <blockquote class="layui-elem-quote">
            新增员工
            <button type="button" class="layui-btn layui-btn-sm" style="float: right;margin-top: -4px;" onclick="window.history.back();">返回</button>
        </blockquote>
        <form class="layui-form" action="" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">头像：</label>
                <div class="layui-input-inline">
                    <input type="file" accept="image/png,image/jpg,image/jpeg" id="fileUpLoad" multiple style="display: none;" name="">
                    <label class="addFile" for="fileUpLoad">
                        <i class="layui-icon layui-icon-upload"></i>上传
                    </label>
                    <label class="addFileImg" for="fileUpLoad">
                        <img src="" alt="">
                    </label>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>账号：</label>
                <div class="layui-input-inline">
                  <input type="text" name="account" autocomplete="off" placeholder="请输入账号" class="layui-input" maxlength="20" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="20">
                </div>
                <div class="layui-form-mid layui-word-aux">注：6到20位字母或数字</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>确认密码：</label>
                <div class="layui-input-inline">
                    <input type="password" name="password1" placeholder="请输入确认密码" autocomplete="off" class="layui-input" maxlength="20">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>姓名：</label>
                <div class="layui-input-inline">
                  <input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="layui-input" maxlength="20">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>性别：</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked="">
                    <input type="radio" name="sex" value="2"" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>角色权限：</label>
                <div class="layui-input-inline">
                    <select name="roleId" lay-filter="roleId">
                        <option value="">请选择角色</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="redtext marginRight">*</span>状态：</label>
                <div class="layui-input-block">
                    <input type="radio" name="openStatus" value="1" title="启用" checked="">
                    <input type="radio" name="openStatus" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1">确认</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="window.history.back()">取消</button>
              </div>
            </div>
        </form>
    </div>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>

    layui.config({
        base: 'plugins/layui/modules/',
    }).use(['http', 'form'], function() {
        var http = layui.http,
            form = layui.form;

        // 所属角色查询
        http.get('supplier/admin/role/listAll',{},function(res){
            if(res.code == 200){
                var html = '<option value="">请选择角色</option>';
				var data = res.data;
				for (var i = 0; i < data.length; i++) {
					html += '<option value="' + data[i].id + '">' + data[i].roleName + '</option>'
				}
				$('select[name=roleId]').html(html);
				form.render('select');
            }else{
                layer.msg(res.msg)
            }
        })

        // 头像
        var headImage
        $('#fileUpLoad').on('change', function () {
            var file = this.files
            var formData = new FormData();
            formData.append('file', file[0]);
            formData.append('fileType', 'img');
            formData.append('isFileName', false);
            http.upLoad('system/file/upload',formData,function(res){
                $('#fileUpLoad').val('')
                if(res.code == 200){
                    headImage = res.data
                    $('.addFile').hide()
                    $('.addFileImg').css('display','block')
                    $('.addFileImg>img').attr('src',TUrl+headImage)
                }else{
                    layer.msg(res.msg)
                }
            })
        })
        
        //监听提交
        form.on('submit(demo1)', function(data){
            // console.log(data.field)
            // if(!headImage){
            //     layer.msg('请上传头像')
            //     return
            // }
            if($.trim(data.field.account) == "") {
                layer.msg('请输入账号')
                return
            }
            if($.trim(data.field.password) == "") {
                layer.msg('请输入密码')
                return
            }
            if(!/^[0-9a-zA-Z]{6,20}$/.test(data.field.password)){
                layer.msg('密码不规范')
                return
            }
            if(data.field.password != data.field.password1){
                layer.msg('密码不一致')
                return
            }
            if($.trim(data.field.name) == "") {
                layer.msg('请输入姓名')
                return
            }
            if($.trim(data.field.roleId) == "") {
                layer.msg('请选择角色')
                return
            }
            
            http.post('supplier/admin/staff/add',{
                headImage: headImage,
                account: $.trim(data.field.account),
                password: data.field.password,
                name: data.field.name,
                sex: data.field.sex,
                roleId: data.field.roleId,
                openStatus: data.field.openStatus
            },function(res){
                if(res.code == 200){
                    layer.msg('操作成功')
                    setTimeout(function(){
                        window.history.back()
                    },500)
                }else{
                    layer.msg(res.msg)
                }
            })
        });
		
		// 失焦验证密码
		$("input[name=password]").blur(function(e){
			let password1 = $('input[name=password1]').val();
			http.verifPwd($(this).val(),password1,1);
		}) 
		$("input[name=password1]").blur(function(e){
			let password = $('input[name=password]').val();
			http.verifPwd(password,$(this).val(),2);
		}) 
    })
</script>
</body>